<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="cmn-Hans">

<head>
	<title>图片列表</title>
	{{template "admin/partials/html-head.html" .}}
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->

<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">

		<!-- Main Header -->
		{{template "admin/partials/html-header.html" .}}
		<!-- Left side column. contains the logo and sidebar -->
		{{template "admin/partials/html-menu.html" .}}

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>
					图片列表
				</h1>
				<ol class="breadcrumb">
					<li><a href="/admin/page/welcome"><i class="fa fa-dashboard"></i>首页</a></li>
					<li class="active">图片列表</li>
				</ol>
			</section>

			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-xs-12">
						<div class="box">
							<div class="box-header">
								<h3 class="box-title">Data Table With Full Features</h3>
							</div>
							<!-- /.box-header -->
							<div class="box-body">
								<table id="userlist" class="table table-bordered table-striped">
									<thead>
										<tr>
											<th>ID</th>
											<th>tag</th>
											<th width="60%">url</th>
											<th>createdAt</th>
											<th width="120px">操作</th>
										</tr>
									</thead>
									<tbody>
										{{/*<tr>
											<td></td>
										</tr>*/}}
									</tbody>
									<tfoot>
										<tr>
											<th>ID</th>
											<th>tag</th>
											<th>url</th>
											<th>createdAt</th>
											<th>操作</th>
										</tr>
									</tfoot>
								</table>
							</div>
							<!-- /.box-body -->
						</div>
						<!-- /.box -->
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</section>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->

		<!-- Main Footer -->
		{{template "admin/partials/html-footer.html"}}

		<!-- Control Sidebar -->
		{{template "admin/partials/html-control-sidebar.html"}}
		<!-- /.Control-sidebar -->
	</div>
	<!-- ./wrapper -->

	<!-- REQUIRED JS SCRIPTS -->
	{{template "admin/partials/html-js.html"}}
	<!-- /REQUIRED JS SCRIPTS -->

	<!-- page script -->
	<script type="text/javascript">
		$(function () {
			//列表
			var userList = $('#userlist').DataTable({
				language: {
					processing: "数据加载中……",
					zeroRecords: "No records to display"
				},
				paging: true,
				lengthChange: false,
				searching: true,
				ordering: true,
				info: true,
				scrollX: true,
				autoWidth: true,
				serverSide: true,
				processing: true,
				ajax: function (data, callback, settings) {
					var postData = {
						draw: data.draw,
						perPage: data.length,
						start: data.start,
						search: data.search.value
					};
					$.ajax({
						url: '/admin/api/picture-list',
						type: 'GET', //GET
						data: postData,
						timeout: 5000,    //超时时间
						dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
						beforeSend: function (xhr) {
							console.log('发送前')
						},
						success: function (res, textStatus, jqXHR) {
							if (res.code == 1) {
								layer.msg(res.msg, { icon: 5 });
								return
							}
							var dtData = {
								recordsTotal: res.data.total || 0,
								recordsFiltered: res.data.total || 0,
								data: res.data.result || [],
								draw: res.data.draw || 0
							};
							callback(dtData);
						},
						error: function (xhr, textStatus) {
							console.log('错误')
						},
						complete: function () {
							console.log('结束')
						}
					})
				},
				rowId: 'id',//自动设置行id
				columns: [
					{ data: 'id' },
					{
						data: 'tag',
						render: function (data, type, row) {
							var tags = [];
							if (data.length > 0) {
								tags = data.split(",");
							}
							var html = "";
							tags.forEach(element => {
								html += '<span class="label label-success">' + element + '</span>';
							});
							return html;
						}
					},
					{
						data: 'pic_url',
						render: function (data, type, row) {
							var html = '<a href="' + data + '" target="_blank">' + data + '</a>'
							return html;
						}
					},
					{
						data: 'created_at',
						render: function (data, type, row, settings) {
							return moment(data).format("YYYY-MM-DD HH:mm:ss");
						}
					},
					{
						data: '',
						render: function (data, type, row) {
							var html = '<a href="javascript:void(0);" class="J-delete">删除</button>'
							return html;
						}
					}
				],
				"createdRow": function (row, data, dataIndex) {
					//有了DT_RowId属性就会自动添加id到行上,不需要在此操作，可以做其他事
					// $(row).data("userName", data.userName);
				}
			});
			//删除
			$("#userlist").on("click", ".J-delete", function () {
				var id = $(this).closest("tr").attr("id");
				if (confirm("确定删除？")) {
					$.ajax({
						url: '/admin/api/picture-delete',
						type: 'post', //GET
						async: true,    //或false,是否异步
						data: {
							picId: id
						},
						timeout: 5000,    //超时时间
						dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
						beforeSend: function (xhr) {
							console.log('发送前')
						},
						success: function (data, textStatus, jqXHR) {
							if (data.code !== 0) {
								layer.msg(data.msg, { icon: 5 });
								return
							}
							layer.msg("删除成功！", { icon: 6 });
							userList.ajax.reload();
						},
						error: function (xhr, textStatus) {
							console.log('错误')
						},
						complete: function () {
							console.log('结束')
						}
					})
				}
			});
			//修改
			$("#userlist").on("click", ".J-update", function () {
				var id = $(this).closest("tr").attr("id");
				$.get("/admin/user/" + id, function (data) {
					$("#userId").val(id);
					$("#username").val(data.data.username);
					$("#gender").val(data.data.gender);
					$("#email").val(data.data.email);
					$("#mobile").val(data.data.mobile);
					$("#desc").val(data.data.description);
					$("#address").val(data.data.addr);
					layer.open({
						type: 1,
						area: ['500px', 'auto'],
						btn: ['确定', '取消'],
						fixed: false,//跟随滚动
						shadeClose: true, //点击遮罩关闭
						content: $("#update-dialog"),
						yes: function (index, layero) {
							$.ajax({
								url: '/admin/user',
								type: 'PUT', //GET
								async: true,    //或false,是否异步
								data: {
									userId: $("#userId").val(),
									username: $("#username").val(),
									gender: $("#gender").val(),
									email: $("#email").val(),
									mobile: $("#mobile").val(),
									desc: $("#desc").val(),
									addr: $("#address").val()
								},
								timeout: 5000,    //超时时间
								dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
								success: function (data, textStatus, jqXHR) {
									if (data.code !== 0) {
										layer.msg(data.msg, { icon: 5 });
										return
									}
									layer.msg("修改成功！", { icon: 6 });
									layer.close(index); //如果设定了yes回调，需进行手工关闭
									userList.ajax.reload();
								},
								error: function (xhr, textStatus) {
									layer.msg("修改失败！", { icon: 5 });
								},
								complete: function () {

								}
							})
						}, btn2: function (index, layero) {
							layer.close(index);
						}
					});
				})
			});
		})
	</script>
</body>

</html>